<template>
    <div class="detail base">
      <div class="crumbs-shop">
        <div class="content">
          <div class="crumbs">河小铺 &gt; 数码</div>
          <div class="shop-box">
            <a href="#" class="shop">
              <i class="shop-marking">自营</i>
              <i>联系客服</i>
            </a>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="detail-up">
          <div class="left">
            <div class="big-img">
              <img :src="productDetails.cover"/>
            </div>
  
          </div>
          <div class="info">
            <div class="name-box">
              <div class="name">
                {{ productDetails.name }}
              </div>
              <div class="des">
                {{ productDetails.feature }}
              </div>
            </div>
            <div class="praise-rate">
              <div class="rate">
                {{ productDetails.goodrate }}%
              </div>
              <div class="text">好评率</div>
            </div>
            <div class="price-box">
              <div class="item goods-price">
                <span class="tit">价格</span>
                <div class="con">
                  <div class="price">
                    ￥
                    <span class="big">
                      {{ productDetails.price }}
                    </span>
                  </div>
                  <div id="old-price" class="old-price" style="opacity: 1;">
                    <span>{{ productDetails.oldprice }}</span>
                  </div>
                </div>
              </div>
  
              <div class="item">
                <span class="tit">说明</span>
                <span>
                    <span>购买后当天24点前有效</span>
                  </span>
              </div>
              <div class="right-top-corner">
                <div class="cumulative-score con-box">
                  <div class="num">
                    {{ productDetails.scorecount }}
                  </div>
                  <div class="text">累计评分</div>
                </div>
                <div class="successful-trade con-box">
                  <div class="num">
                    {{ productDetails.salecount }}
                  </div>
                  <div class="text">累计售出</div>
                </div>
              </div>
            </div>
            <div class="sku-box">
              <div class="items number">
                <span class="tit">数量</span>
                <div class="con">
                  <div class="goods-number">
                    <span class="reduce limit">-</span>
                    <input type="number" oninput="value=value.replace(/[^\d]/g,'')" value="1" class="number"/>
                    <span class="increase">+</span></div>
                  <span class="stock">
                      库存
                      <span class="num">{{ productDetails.stock }}</span>
                      件
                    </span>
                </div>
              </div>
            </div>
            <div class="btns">
              <span class="buy-now">立即购买</span>
              <span class="collect">收藏商品</span>
            </div>
  
          </div>
        </div>
  
        <div class="main">
          <div class="tit"> 商品详情</div>
          <div class="con" v-html="productDetails.detail"></div>
        </div>
  
        <div class="main">
          <div class="tit"> 热门商品</div>
          <div class="con">
            <div class="item-con">
  
              <div class="item" 
                v-for="item in hotProductList"
                :key="item.id"
                @click="$router.push({name: 'productDetails', params:{id: item.id}})"
              >
                <div class="prod-img">
                  <img :src="item.cover" alt=""/>
                </div>
                <div class="prod-name">{{ item.name }}</div>
                <div class="prod-price">￥{{ item.price }}</div>
              </div>
  
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
<script setup>
import { recordEnterPageStartTime, statisticsSource, statisticsStayTime } from '@/utils/productDetailsUtils';
import request from '@/utils/request';
import { onMounted, reactive, ref } from 'vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute } from 'vue-router';

const route = useRoute()

const productDetails = ref({})

const hotProductList = ref([])

onMounted
(
  () =>
  {
    setData(route.params.id)
  }
)

const setData = (id) =>
{
    setProductDetails(id)
    setHotProductList()
}

const setProductDetails = async (id) =>
{
    const res = await request.post
    (
      '/product.php',
      `id=${id}`,
      {
          'Content-Type': 'application/x-www-form-urlencoded'
      }
    )

    if (res.stat !== 1)
    {
      alert(res.msg)
      return
    }

    productDetails.value = res.data
}

const setHotProductList = async () =>
{
    const res = await request.get('/hot.php')

    if (res.stat !== 1)
    {
      alert(res.msg)
      return
    }

    hotProductList.value = res.data
}

onBeforeRouteLeave
(
  () =>
  {
    statisticsStayTime(route.params.id)
  }
)

onBeforeRouteUpdate
(
  to =>
  {
    setData(to.params.id)
  }
)
</script>

<style scoped>
.base {
  min-height: 535px;
  padding-bottom: 0 !important;
  flex-direction: column
}

.detail .crumbs-shop {
  width: 100%;
  height: 40px;
  background: #f9f9f9
}

.detail .crumbs-shop .content {
  display: flex;
  align-items: center;
  height: 100%
}

.detail .crumbs-shop .crumbs {
  flex: 1;
  padding: 0
}

.detail .crumbs-shop .shop-box {
  display: flex;
  align-items: center
}

.detail .crumbs-shop .shop-box .shop {
  display: block
}

.detail .crumbs-shop .shop-box .shop .shop-marking {
  background: #e1251b;
  color: #fff;
  padding: 1px 3px;
  display: inline-block;
  height: 14px;
  line-height: 14px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: top
}

.content {
  width: 1200px;
  max-width: 1200px;
  margin: auto;
  padding-bottom: 40px
}

.detail .detail-up {
  display: flex;
  margin-top: 20px
}

.detail .detail-up .left {
  width: 450px;
  margin-right: 60px
}

.detail .detail-up .left .big-img {
  position: relative;
  display: block;
  text-align: center;
  width: 100%;
  height: 448px;
  line-height: 448px;
  border: 1px solid #eaeaea;
  box-sizing: border-box
}

.detail .detail-up .left .big-img img {
  max-width: 100%;
  max-height: 98%;
  vertical-align: middle
}


.detail .detail-up .info {
  position: relative;
  flex: 1
}

.detail .detail-up .info .name-box {
  margin-bottom: 15px;
  min-height: 44px
}

.detail .detail-up .info .name-box .name {
  width: 587px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  word-wrap: break-word;
  overflow: hidden
}

.detail .detail-up .info .name-box .des {
  width: 587px;
  margin-top: 8px;
  color: #999;
  line-height: 16px;
  font-size: 12px;
  word-wrap: break-word
}

.detail .detail-up .info .praise-rate {
  position: absolute;
  top: 0;
  right: 0;
  text-align: center
}

.detail .detail-up .info .praise-rate .rate {
  font-size: 20px;
  font-weight: 700;
  color: #e1251b;
  margin-bottom: 4px
}

.detail .detail-up .info .praise-rate .text {
  color: #999
}

.detail .detail-up .info .price-box {
  position: relative;
  background: #f9f9f9;
  border-top: 1px dotted #eee;
  border-bottom: 1px dotted #eee;
  padding: 0 20px 18px;
  margin-top: -1px;
  z-index: 99
}

.detail .detail-up .info .price-box .item {
  display: flex;
  align-items: center;
  margin-top: 15px
}

.detail .detail-up .info .price-box .item .tit {
  width: 39px;
  color: #999;
  text-align-last: justify;
  margin-right: 29px
}

.detail .detail-up .info .price-box .item .con {
  flex: 1
}

.detail .detail-up .info .price-box .item.goods-price {
  line-height: 26px
}

.detail .detail-up .info .price-box .item.goods-price .con {
  display: flex
}

.detail .detail-up .info .price-box .item.goods-price .con .price {
  font-size: 20px
}

.detail .detail-up .info .price-box .item.goods-price .con .price .big {
  font-size: 26px;
  font-weight: 700
}

.detail .detail-up .info .price-box .item.goods-price .con .old-price {
  font-family: arial;
  color: #999;
  text-decoration: line-through;
  margin-left: 10px
}

.detail .detail-up .info .price-box .right-top-corner {
  position: absolute;
  top: 15px;
  right: 20px;
  display: flex;
  align-items: center
}

.detail .detail-up .info .price-box .right-top-corner .con-box {
  text-align: center
}

.detail .detail-up .info .price-box .right-top-corner .cumulative-score {
  margin-right: 38px
}

.detail .detail-up .info .price-box .right-top-corner .con-box .num {
  height: 19px;
  line-height: 19px;
  font-size: 14px;
  color: #e1251b;
  margin-bottom: 3px
}

.detail .detail-up .info .price-box .right-top-corner .con-box .text {
  height: 16px;
  line-height: 16px;
  color: #999
}

.detail .detail-up .info .sku-box {
  margin-top: 20px
}

.detail .detail-up .info .sku-box .items {
  display: flex;
  align-items: center;
  margin-top: 2px
}

.detail .detail-up .info .sku-box .items .tit {
  margin: 0 15px;
  color: #999;
  display: block;
  line-height: 30px;
  word-break: break-all;
  width: 5em
}

.detail .detail-up .info .sku-box .items .con {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap
}

.detail .detail-up .info .sku-box .items.number {
  margin-top: 10px
}

.detail .detail-up .info .sku-box .items .con .goods-number {
  height: 30px;
  border: 1px solid #ddd
}

.detail .detail-up .info .sku-box .items .con .goods-number .increase,
.detail .detail-up .info .sku-box .items .con .goods-number .reduce {
  display: inline-block;
  vertical-align: top;
  width: 36px;
  height: 30px;
  font-size: 22px;
  text-align: center;
  line-height: 26px;
  color: #999;
  cursor: pointer
}

.detail .detail-up .info .sku-box .items .con .goods-number .reduce {
  border-right: 1px solid #ddd
}

.detail .detail-up .info .sku-box .items .con .goods-number .increase {
  border-left: 1px solid #ddd
}

.detail .detail-up .info .sku-box .items .con .goods-number .limit {
  cursor: not-allowed;
  color: #ccc
}

.detail .detail-up .info .sku-box .items .con .goods-number .number {
  border: 0;
  width: 40px;
  height: 30px;
  text-align: center;
  font-family: arial;
  vertical-align: top
}

.detail .detail-up .info .sku-box .items .con .stock {
  margin-left: 13px
}

.detail .detail-up .info .sku-box .items .con .stock .num {
  color: #e1251b
}


.detail .detail-up .info .btns {
  margin-top: 30px;
  padding-left: 15px;
  display: flex
}


.detail .detail-up .info .btns .buy-now,
.detail .detail-up .info .btns .collect {
  width: 168px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer
}

.detail .detail-up .info .btns .buy-now {
  background: #e1251b;
  color: #fff;
  margin-right: 10px
}

.detail .detail-up .info .btns .buy-now:hover {
  opacity: .9
}


.detail .detail-up .info .btns .collect {
  border: 1px solid #ddd;
  padding: 0 30px;
  margin-left: 10px
}


.price {
  font-family: arial;
  font-size: 14px;
  color: #e1251b
}


.price .big {
  font-size: 16px
}


.detail .main {
  position: relative;
  width: 100%;
  /*height: 400px;*/
  border: 1px solid #eaeaea;
  box-sizing: border-box;
  margin-top: 50px
}

.detail .main .tit {
  width: 100%;
  height: 48px;
  line-height: 44px;
  font-size: 14px;
  padding: 0 20px;
  background: #f8f8f8;
  box-sizing: border-box;
  overflow: hidden
}


.detail .main .con {
  /*display: flex;*/
  padding: 20px 30px;
  font-size: 14px;
  line-height: 2;
}


.detail .main .con .item-con {
  width: 100%;
  display: flex;
  overflow: hidden
}

.detail .main .con .item-con .item {
  width: 275px;
  height: 350px;
  text-align: center;
  cursor: pointer
}

.detail .main .con .item-con .item .prod-img {
  position: relative;
  width: 205px;
  height: 205px;
  margin: 25px auto 0
}

.detail .main .con .item-con .item .prod-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%
}

.detail .main .con .item-con .item .prod-name {
  width: 100%;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 30px;
  margin-top: 35px;
  box-sizing: border-box
}

.detail .main .con .item .prod-price {
  font-size: 14px;
  color: #e1251b;
  margin-top: 10px
}
</style>